---
import BaseLayout from "../layouts/BaseLayout.astro"
---

<BaseLayout childpage backtotop>
  <link
    rel="stylesheet"
    slot="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@deltablot/dropzone@7.1.2/dist/dropzone.css"
  />
  <div class="container-fluid">
    <div class="row g-3">
      <div class="col">
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-body">设置我的资料</div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-5">
                <form id="form">
                  <div class="row mb-3">
                    <label
                      for="username"
                      class="col-sm-3 col-form-label text-sm-end">用户名</label
                    >
                    <div class="col-sm-9">
                      <input
                        type="text"
                        class="form-control"
                        id="username"
                        name="username"
                        readonly
                        value="admin88"
                        disabled
                      />
                      <div class="form-text">不可修改。一般用于后台登入名</div>
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="nickname"
                      class="col-sm-3 col-form-label text-sm-end">昵称</label
                    >
                    <div class="col-sm-9">
                      <input
                        type="text"
                        class="form-control"
                        id="nickname"
                        name="nickname"
                        value="欲饮琵琶码上催"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="nickname"
                      class="col-sm-3 col-form-label text-sm-end">性别</label
                    >
                    <div class="col-sm-9">
                      <div class="d-flex align-items-center h-100">
                        <div class="form-check form-check-inline">
                          <input
                            class="form-check-input"
                            type="radio"
                            name="inlineRadioOptions"
                            id="inlineRadio1"
                            value="option1"
                            checked
                          />
                          <label class="form-check-label" for="inlineRadio1"
                            >男</label
                          >
                        </div>
                        <div class="form-check form-check-inline">
                          <input
                            class="form-check-input"
                            type="radio"
                            name="inlineRadioOptions"
                            id="inlineRadio2"
                            value="option2"
                          />
                          <label class="form-check-label" for="inlineRadio2"
                            >女</label
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="avatar"
                      class="col-sm-3 col-form-label text-sm-end">头像</label
                    >
                    <div class="col-sm-9">
                      <div class="dropzone" id="pic-wrapper"></div>
                      <input
                        type="text"
                        class="form-control position-fixed top-100"
                        id="pic"
                        name="pic"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="phone"
                      class="col-sm-3 col-form-label text-sm-end">手机</label
                    >
                    <div class="col-sm-9">
                      <input
                        type="text"
                        class="form-control"
                        id="phone"
                        name="phone"
                        value="19978451354"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="email"
                      class="col-sm-3 col-form-label text-sm-end">邮箱</label
                    >
                    <div class="col-sm-9">
                      <input
                        type="text"
                        class="form-control"
                        id="email"
                        name="email"
                        value="lujiahao@88.com"
                      />
                    </div>
                  </div>
                  <div class="row mb-3">
                    <label
                      for="desc"
                      class="col-sm-3 col-form-label text-sm-end">备注</label
                    >
                    <div class="col-sm-9">
                      <textarea
                        class="form-control"
                        id="desc"
                        rows="3"
                        name="desc"></textarea>
                    </div>
                  </div>
                  <div class="row mb-3">
                    <div class="col-sm-9 offset-sm-3">
                      <button type="submit" class="btn btn-primary"
                        >确认修改</button
                      >
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/formValidation.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/framework/bootstrap.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/gh/ajiho/formvalidation@main/dist/js/language/zh_CN.js"
  ></script>
  <script
    is:inline
    slot="script"
    src="https://cdn.jsdelivr.net/npm/@deltablot/dropzone@7.1.2/dist/dropzone-min.js"
  ></script>

  <script is:inline slot="js">
    //文件上传插件
    let picWrapper = new Dropzone("#pic-wrapper", {
      url: "/article/upfile.php",
      headers: {
        //这里一般的mvc框架都有这个防止csrf攻击的方法用来生成token
        "X-CSRF-TOKEN": "xxxxxx",
      },
      paramName: "file", // 上传字段名称 默认为file
      maxFiles: 1, // 一次性上传的文件数量上限
      maxFilesize: 5, // 文件大小，单位：MB
      acceptedFiles: ".jpg,.gif,.png,.jpeg", // 上传的类型
      addRemoveLinks: true,
      parallelUploads: 1, // 一次上传的文件数量
      dictDefaultMessage: "拖动文件至此或者点击上传",
      dictMaxFilesExceeded: "最多只能上传3张封面",
      dictResponseError: "文件上传失败!",
      dictInvalidFileType: "文件类型只能是*.jpg,*.gif,*.png,*.jpeg",
      dictFallbackMessage: "浏览器不受支持",
      dictFileTooBig: "最大只能上传2M大小的封面.",
      dictRemoveLinks: "删除",
      dictRemoveFile: "删除",
      dictCancelUpload: "取消",
      init: function () {
        //这一段代码解决最大上传文件数量(不用管)
        this.on("addedfile", function (file) {
          if (this.files.length > this.options.maxFiles) {
            this.removeFile(file)
          }
        })

        this.on("success", function (file, response) {
          if (response.code === 200) {
            // 解决表单提交时，图片以#隔开解决
            let arr = $("#fang_cover")
              .val()
              .split(",")
              .filter((item) => item)
            arr.push(response.data)
            let str = arr.join(",")

            //同时把该值存到file对象上,等会儿删除的时候要通过它清空隐藏域的id值
            file.id = response.data
          } else {
            //文件上传失败
            $(file.previewTemplate)
              .removeClass("dz-processing dz-image-preview dz-success")
              .addClass("dz-error")
            $(file.previewTemplate)
              .find(".dz-error-message span")
              .text(response.msg) //response.msg是后台返回的上传错误信息
          }
        })

        //文件上传同时也要清空input隐藏域的id值
        this.on("removedfile", function (file) {
          if (file.id !== undefined) {
            let arr = $("#fang_cover").val().split(",")
            arr.splice(arr.indexOf(file.id), 1)
            let str = arr.join(",")
          }
        })
      },
    })

    //表单验证
    $("#form")
      .formValidation({
        fields: {
          desc: {
            validators: {
              notEmpty: true,
            },
          },
        },
      })
      .on("success.form.fv", function (e) {
        //阻止表单提交
        e.preventDefault()
        //得到表单对象
        const $form = $(e.target)
        const data = $form.serialize()

        console.log("rewrewerw")

        //ajax请求
        $.ajax({
          url: "/profile",
          method: "put",
          data,
        }).then(function (response) {
          if (response.code === 200) {
            $.toasts.success()
          }
        })
      })
  </script>
</BaseLayout>
